<template>
	<view>
		<u-popup v-model="show" mode="bottom" :custom-style="{backgroundColor: 'rgba(0,0,0,0)'}" :mask-custom-style="maskCustomStyle"
			border-radius="24">
			<view>
				<view class="flex-row" style="width: 100%;justify-content: flex-end;margin-bottom: 50rpx;">
					<image @click="popupSpecsbtn" style="width: 24rpx;height: 24rpx;margin-right: 32rpx;"
						class="self-end" src="/static/image/haoduogeni/close-icon.png" />
				</view>

				<view class="flex-row justify-between section_33_r">
					<view v-if="taocan_type == 1" @click="changeTaocanType(1)"
						class="self-start font1_r text1_r flex-row justify-center"
						:class="taocan_type == 0 ? 'jifen-title_r' : 'jinbi-title_r'">
						<text style="margin-bottom: 20rpx;height: 50rpx;line-height: 50rpx;">积分充值</text>
					</view>
					<view class="flex-row"
						:class="taocan_type == 0 ? 'jifen-bg_r justify-center' : 'justify-center jinbi-bg_r'">

						<view class="flex-row justify-center items-center"
							:class="taocan_type == 0 ? 'jifen-lf_r' : ' jinbi-lf_r'">
							<image class="shrink-0 image_22_r" src="/static/image/haoduogeni/jinbi-icon.png" />
							<text class="text_22_r ml-6-5">{{taocan_type == 0 ? '积分充值' : '金币充值'}}</text>
						</view>

					</view>
					<view v-if="taocan_type == 0" @click="changeTaocanType(2)"
						class="self-start font1_r text1_r flex-row justify-center"
						:class="taocan_type == 0 ? 'jifen-title_r' : 'jinbi-title_r'">
						<text style="margin-bottom: 20rpx;height: 50rpx;line-height: 50rpx;">金币充值</text>
					</view>
				</view>
				<view class="flex-col section_3_r" :class="taocan_type == 0 ? 'border-radius2_r' : 'border-radius1_r'">
					<view class="flex-row equal-division_r">
						<view @click="changeTaocan(item,index)" v-for="(item,index) in list" :key="index"
							class="flex-col justify-start group_2_r equal-division-item_r">
							<view class="flex-col" :class="current == index ? 'section_5_r' : 'section_4_r'">
								<view class="flex-row " style="padding: 0 26rpx;">
									<image class="shrink-0 image_2_r" src="/static/image/haoduogeni/jifen-icon.png" />
									<text class="ml-4-5"
										:class="current == index ? 'font_2_r text_2_r' : 'font_2_r'">{{item.point}}</text>
								</view>
								<view class="flex-row justify-evenly items-baseline self-stretch group_3_r">
									<text :class="current == index ? 'font_4_r text_5_r' : 'font_4_r text_4_r'">¥</text>
									<text
										:class="current == index ? 'font_3_r text_3_r' : 'font_3_r'">{{item.price | getIntegerPart}}</text>
									<text
										:class="current == index ? 'font_666_r text_12_r' : 'font_6_r text_12_r'">.{{item.price | getDecimalPart}}</text>
								</view>
								<text v-if="index%3 == 0" class="self-center"
									:class="current == index ? 'font_5_r text_6_r text_7_r' : 'font_5_r text_6_r'">首开优惠</text>
								<text v-if="index%3 != 0" class="self-center"
									:class="current == index ? 'font_5_r text_6_r text_7_r' : 'font_5_r text_6_r'">限时优惠</text>
							</view>
							<view v-if="index%3 == 0" class="flex-col justify-start items-center text-wrapper_r pos_r"><text
									class="font_r">首开优惠</text></view>
							<view v-if="index%3 != 0" class="flex-col justify-start items-center text-wrapper_r pos_r"><text
									class="font_r">限时优惠</text></view>
						</view>
					</view>
					<view class="flex-row pay-type_r" v-if="taocan_type == 1">
						<view @click="changePayType(item,index)" v-for="(item,index) in payTypeList" :key="index"
							class="flex-row justify-between items-center"
							:class="[currentPay == index ? 'section_77_r' : 'section_66_r',index == 1 ? 'ml-11-5' : '']">
							<view>
								<view class="flex-row items-center">
									<image class="shrink-0 image_22_r" :src="item.icon" />
									<text class="font_66_r text_99_r ml-4-5">{{item.title}}</text>
								</view>
								<view style="width: 100%;margin-top: 10rpx;" class="flex-row justify-center"
									v-if="item.type == 3">{{balance}}</view>
							</view>

							<image v-if="currentPay == index" class="image_44_r image_66_r"
								src="/static/image/haoduogeni/pay-type-checked.png" />
							<image v-else class="image_44_r image_66_r" src="/static/image/haoduogeni/uncheck-icon.png" />
						</view>
					</view>
					<view class="flex-row justify-between items-center section_6_r"
						:style="taocan_type == 0 ? 'margin-top: 76rpx;' : ''">
						<view class="flex-row items-baseline">
							<text class="font_5_r text_10_r">实付</text>
							<text class="font_6_r text_11_r">¥</text>
							<text class="text_8_r">{{price | getIntegerPart}}</text>
							<text class="font_6_r text_12_r">.{{price | getDecimalPart}}</text>
						</view>
						<view @click="buyNow" class="flex-col justify-start items-center text-wrapper_2_r"><text
								class="text_9_r">确认充值</text></view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getPointList,
		getGoldList,
		createOrder,
		getBlance
	} from '../../../haoduogeni/common/api/user';

	export default {
		props: {
			show: {
				value: false,
				type: Boolean
			},
			openid: {
				value: '',
				type: String
			}
		},
		filters: {
			getIntegerPart(num) {
				var str = num.toString();
				return str.split('.')[0] || '';
			},
			// 截取小数点后的数字
			getDecimalPart(num) {
				var str = num.toString();
				var parts = str.split('.');
				return parts.length > 1 ? parts[1] : '';
			}
		},
		data() {
			return {
				maskCustomStyle: {
					background: 'rgba(0, 0, 0, 0.2)'
				},
				customStyle: {
					background: 'rgba(0, 0, 0, 0)',
					backgroundColor: 'rgba(0, 0, 0, 0)'
				},
				list: [],
				current: 0,
				price: 0,
				taocan_id: 0,
				taocan_type: 0,
				payTypeList: [{
						title: '余额支付',
						icon: '/static/image/haoduogeni/pay-jinbi-icon.png',
						type: 3,
					},
					{
						title: '微信支付',
						icon: '/static/image/haoduogeni/pay-wechat-icon.png',
						type: 1,
					},
				],
				currentPay: 1,
				pay_type: 1,
				balance: 0,
				isLoading: false
			}
		},
		created() {
			if (this.taocan_type == 0) {
				this.getList();

			} else {
				this.getGoldList();

			}
		},
		methods: {
			changePayType(item, index) {

				this.currentPay = index;
				this.pay_type = item.type;


			},
			getBalanceYun() {
				console.log('111111111111')
				var _this = this;
				getBlance({
					uid: uni.getStorageSync('userId')
				}).then(res => {
					//成功时回调函数
					console.log(res, 'getBlance')
					if (res.errno == 0) {

						_this.balance = res.data;

					}
				}).catch(err => {

				})
			},
			buyNow() {
				if (this.isLoading) {
					uni.showToast({
						title: '请勿重复点击',
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					title: '加载中',
				})

				this.isLoading = true;

				console.log(this.openid, 'this.data.openid')
				var _this = this;
				createOrder({
					pt_id: this.$ptId,
					uid: uni.getStorageSync('userId'),
					type: this.taocan_type == 0 ? 1 : 2, // 1充值积分2充值金币3购买套餐
					taocan_id: this.taocan_id,
					pay_type: this.pay_type, //1微信支付3余额支付 （只有买套餐有金币支付）
					openid: this.openid
				}).then(res => {
					//成功时回调函数
					console.log(res.errno, 'getCodeList')
					if (res.errno == 0) {
						var payInfo = res.data.payInfo;
						if (this.pay_type == 3 && this.taocan_type == 1) {

							this.isLoading = false;

							uni.hideLoading();
							uni.showToast({
								title: '充值成功',
								icon: 'none'
							})
							_this.getBalanceYun();
							_this.$emit("confirm");

							_this.show = false;

						} else {
							this.wechatPay(payInfo)
						}

					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})

						this.isLoading = false;

						uni.hideLoading();
					}
				}).catch(err => {
					//失败时回调函数
					console.log(err)

					this.isLoading = false;

					uni.hideLoading();
				})
			},
			wechatPay(info) {
				var t = this;
				uni.requestPayment({
					timeStamp: info.timestamp,
					nonceStr: info.nonceStr,
					package: info.package,
					signType: info.signType ? info.signType : "MD5",
					paySign: info.paySign,
					success: function(a) {
						t.isLoading = false;
						uni.hideLoading();
						uni.showModal({
							title: "提示",
							content: "支付成功",
							showCancel: !1,
							success: function(a) {
								if (a.confirm) {
									t.$emit("confirm");
									t.show = false;
									// wx.navigateTo({
									//   url: "/haoduogeni/mine/index"
									// })
								}
							}
						});
					},
					fail: function(a) {
						console.log(a)
						uni.showToast({
							title: "支付失败请稍后重试",
							icon: "none",
							duration: 2e3
						});
						t.isLoading = false;

						uni.hideLoading();
					}
				});
			},
			getGoldList() {
				var _this = this;
				getGoldList().then(res => {
					//成功时回调函数
					console.log(res.errno, 'getCodeList')
					if (res.errno == 0) {

						_this.list = res.data;
						_this.price = res.data[0].price;
						_this.taocan_id = res.data[0].id;
					}
				}).catch(err => {
					//失败时回调函数
					console.log(err)
				})

			},
			changeTaocanType(type) {
				if (type == 1) {

					this.taocan_type = 0;
					this.current = 0;
					this.pay_type = 1;

					this.getList()

				} else if (type == 2) {

					this.taocan_type = 1;
					this.current = 0;
					this.pay_type = 1;

					this.getGoldList();
					this.getBalanceYun();
				}
			},
			getList() {
				var _this = this;
				getPointList().then(res => {
					//成功时回调函数
					console.log(res.errno, 'getCodeList')
					if (res.errno == 0) {

						_this.list = res.data;
						_this.price = res.data[0].price;
						_this.taocan_id = res.data[0].id;

					}
				}).catch(err => {
					//失败时回调函数
					console.log(err)
				})

			},
			changeTaocan(item, index) {

				this.current = index;
				this.taocan_id = item.id;
				this.price = item.price;

			},
			popupSpecsbtn(t) {
				console.log(t);
				this.$emit("closeShow");

				// this.show = false;

			},
		}
	}
</script>
<style>
	@import url("../../common/css/common.css");
</style>
<style lang="less" scoped>
	.u-popup {
	  background-color: transparent !important; /* 设置背景为透明 */
	}
	.u-mask {
	  background-color: rgba(0, 0, 0, 0.5) !important; /* 设置遮罩层透明度 */
	}
	.u-drawer-bottom {
		background: rgba(0, 0, 0, 0) !important;
		background-color: rgba(0, 0, 0, 0) !important;
	}

	/deep/.u-drawer__scroll-view {
		background: rgba(0, 0, 0, 0) !important;
		background-color: rgba(0, 0, 0, 0) !important;
	}

	// /deep/ .u-mode-bottom-box {
	// 	background-color: rgba(0, 0, 0, 0) !important;
	// }

	.ml-13 {
		margin-left: 26rpx;
	}

	.ml-4-5 {
		margin-left: 9rpx;
	}

	.section_3_r {
		padding: 0rpx 30rpx 71rpx;
		background-color: #ffffff;
		margin-top: -50rpx;
	}

	.group_r {
		padding-left: 10rpx;
	}

	.image_r {
		width: 24rpx;
		height: 25rpx;
	}

	.text_r {
		color: #000000;
		font-size: 34rpx;
		font-family: PingFang SC;
		line-height: 33rpx;
	}

	.equal-division_r {
		margin: 48rpx 12rpx 0;
	}

	.group_2_r {
		position: relative;
		flex: 1 1 205rpx;
		margin-right: 26rpx;
	}

	.group_2_r:last-child {
		margin-right: 0;
	}

	.equal-division-item_r {
		padding-top: 16rpx;
	}

	.section_4_r {
		padding: 75rpx 0rpx 0rpx 0rpx;
		height: 100%;
		min-height: 244rpx;
		border-radius: 16rpx;
		background-image: url('https://jianji.axu9.com/friendCircleImg/recharge-bg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.image_2_r {
		margin-bottom: 3rpx;
		width: 29rpx;
		height: 30rpx;
	}

	.group_3_r {
		margin-top: 21rpx;
		padding: 0 26rpx;
	}

	.font_4_r {
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 19rpx;
		font-weight: 500;
		color: #000000;
	}

	.text_4_r {
		line-height: 18rpx;
	}

	.font_3_r {
		font-size: 36rpx;
		font-family: DIN;
		letter-spacing: -0.9rpx;
		line-height: 26rpx;
		font-weight: 700;
		color: #000000;
	}

	.font_5_r {
		font-size: 22rpx;
		font-family: PingFang SC;
		line-height: 50rpx;
		color: #000000;
		height: 50rpx;
		position: absolute;
		bottom: 0;
	}

	.text_6_r {
		// margin-top: 52rpx;
	}

	.text-wrapper_r {
		padding: 8rpx 0;
		background-color: #000000;
		border-radius: 12rpx 8rpx 8rpx 0rpx;
		width: 106rpx;
	}

	.pos_r {
		position: absolute;
		left: 0;
		top: 0;
	}

	.font_r {
		font-size: 20rpx;
		font-family: Chiron GoRound TC;
		line-height: 19rpx;
		color: #22dd85;
	}

	.section_5_r {
		padding: 75rpx 0rpx 0rpx 0rpx;
		height: 100%;
		min-height: 244rpx;
		border-radius: 16rpx;
		background-image: url('https://jianji.axu9.com/friendCircleImg/recharge-active-bg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.text_5_r {
		color: #ffffff;
		line-height: 18rpx;
	}

	.text_3_r {
		color: #ffffff;
	}

	.text_7_r {
		color: #ffffff;
	}

	.pos_2_r {
		position: absolute;
		left: 0;
		top: 0;
	}

	.font_2_r {
		font-size: 44rpx;
		font-family: DIN;
		letter-spacing: -1.1rpx;
		line-height: 33rpx;
		font-weight: 700;
		color: #000000;
		width: calc(100% - 52rpx);
		word-break: break-all;
	}

	.text_2_r {
		color: #fffefe;
	}

	.pos_3_r {
		position: absolute;
		left: 0;
		top: 0;
	}

	.section_6_r {
		/* margin-top: 76rpx; */
		padding-left: 40rpx;
		background-color: #effaf8;
		border-radius: 20rpx;
	}

	.text_10_r {
		line-height: 22rpx;
	}

	.font_6_r {
		font-size: 26rpx;
		font-family: PingFang SC;
		line-height: 19rpx;
		font-weight: 500;
		/* color: #000000; */
	}

	.font_666_r {
		font-size: 26rpx;
		font-family: PingFang SC;
		line-height: 19rpx;
		font-weight: 500;
		color: #fff;
	}

	.text_11_r {
		margin-left: 8rpx;
	}

	.text_8_r {
		margin-left: 5rpx;
		color: #000000;
		font-size: 48rpx;
		font-family: DIN;
		font-weight: 700;
		line-height: 36rpx;
		letter-spacing: -1.2rpx;
	}

	.text_12_r {
		line-height: 20rpx;
	}

	.text-wrapper_2_r {
		padding: 36rpx 0;
		background-image: linear-gradient(90deg, #00ceb8 0%, #0fcd99 100%);
		border-radius: 20rpx;
		width: 340rpx;
		height: 100rpx;
	}

	.text_9_r {
		color: #ffffff;
		font-size: 30rpx;
		font-family: PingFang SC;
		line-height: 29rpx;
	}

	.ml-6-5 {
		margin-left: 13rpx;
	}

	.font1_r {
		font-size: 26rpx;
		font-family: PingFang SC;
		line-height: 19rpx;
		font-weight: 500;
		color: #000000;
	}

	.section_33_r {
		/* padding: 42rpx 98rpx 87rpx; */
		/* background-image: url('https://ide.code.fun/api/image?token=689aefa2d26a7d0011a63e23&name=699b4b2339e2b6c8eb04616e1559ffe8.png'); */
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-color: #253c3f;
		border-radius: 32rpx 32rpx 0 0;
		height: 130rpx;
	}

	.pos1_r {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
	}

	.image_22_r {
		width: 35rpx;
		height: 36rpx;
	}

	.text_22_r {
		color: transparent;
		font-size: 38rpx;
		font-family: Douyin Sans;
		font-weight: 700;
		background-image: linear-gradient(0deg, #00af97 0%, #0ac491 100%);
		-webkit-background-clip: text;
	}

	.text1_r {
		margin-right: 4rpx;
		color: #9cb2b4;
		line-height: 25rpx;
	}

	.jifen-bg_r {
		background-image: url('https://jianji.axu9.com/friendCircleImg/bg-right-bb.png');
		width: 65%;
		height: 108rpx;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		z-index: 99;
		margin-top: -20rpx;

	}

	.jifen-lf_r,
	.jinbi-lf_r {
		width: 60%;
		height: 120rpx;
	}

	.jifen-lf_r {
		margin-left: -5%;
	}

	.jifen-title_r {
		width: 40%;
		height: 100rpx;
		border-radius: 0 36rpx 0 0;
		margin-top: 20rpx;
		line-height: 78rpx;
		margin-left: -5%;
	}

	.jinbi-bg_r {
		background-image: url('https://jianji.axu9.com/friendCircleImg/bg-right-aa.png');
		width: 65%;
		height: 108rpx;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		z-index: 99;
		margin-left: -5%;
		margin-top: -20rpx;
	}

	.jinbi-title_r {
		width: 40%;
		height: 100rpx;
		border-radius: 36rpx 0 0 0;
		margin-top: 20rpx;
		line-height: 78rpx;
	}

	.border-radius1_r {
		border-radius: 32rpx 0 0 0;
	}

	.border-radius2_r {
		border-radius: 0 32rpx 0 0;
	}

	.pay-type_r {
		margin-top: 50rpx;
		margin-bottom: 30rpx;
	}

	.ml-11-5 {
		margin-left: 23rpx;
	}

	.ml-4-5 {
		margin-left: 9rpx;
	}

	.section_66_r {
		padding: 38rpx 30rpx 25rpx;
		flex: 1 1 332rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
		height: 100rpx;
		border-left: solid 1rpx #eeeeee;
		border-right: solid 1rpx #eeeeee;
		border-top: solid 1rpx #eeeeee;
		border-bottom: solid 1rpx #eeeeee;
	}

	.image_22_r {
		width: 30rpx;
		height: 30rpx;
	}

	.font_66_r {
		font-size: 26rpx;
		font-family: PingFang SC;
		line-height: 26rpx;
		font-weight: 500;
		color: #000000;
	}

	.text_99_r {
		line-height: 25rpx;
	}

	.image_44_r {
		width: 32rpx;
		height: 32rpx;
	}

	.image_66_r {
		margin-right: 6rpx;
	}

	.section_77_r {
		padding: 28rpx 30rpx;
		flex: 1 1 332rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
		height: 90rpx;
		border-left: solid 1rpx #0ac491;
		border-right: solid 1rpx #0ac491;
		border-top: solid 1rpx #0ac491;
		border-bottom: solid 1rpx #0ac491;
	}

	.image_33_r {
		width: 40rpx;
		height: 33rpx;
	}

	.text_110_r {
		line-height: 25rpx;
	}

	.image_55_r {
		margin-right: 7rpx;
	}
</style>